{% extends 'layout/manage.html' %}

{% block css %}
    <style>
        .title {
            height: 104px;
            color: white;
            display: flex;
            justify-content: center;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            font-size: 15px;
            text-decoration: none;
        }
        .panel-body{
            padding: 0;
            display: flex;
            flex-direction: row;
            justify-content: left;
            align-items: flex-start;
            flex-wrap: wrap;
        }

        .info {
            padding: 10px 10px;
            display: flex;
            justify-content: space-between;
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
            color: #8c8c8c;
        }

        .info a {
            text-decoration: none;
        }

    </style>
{% endblock %}

{% block content %}

    <div class="container">
        <a type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新建项目
        </a>
    </div>
    <hr>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">添加新的项目</h4>
                </div>
                <div class="modal-body">
                    <form id="addForm">
                        {% csrf_token %}
                        {% for field in form %}

                                <div class="form-group">
                                    <label for="exampleInputEmail1">{{ field.label }}</label>
                                    {{ field }}
                                    <!--错误信息-->
                                    <span style="color: red"></span>
                                </div>
                        {% endfor %}

                    </form>
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button id="btnSubmit" type="submit" class="btn btn-primary">确认</button>
                </div>
            </div>
        </div>
    </div>


    <div class="panel panel-warning " style="margin: 50px auto;width: 1300px">
        <div class="panel-heading">
            <h3 class="panel-title"><i class="fa fa-star" aria-hidden="true"></i>&nbsp;星标项目</h3>
        </div>
        <div class="panel-body">
            {% for i in project_dict.start %}
                <div class="item" style="border-radius: 6px;width: 228px;border: 1px solid #dddddd;margin: 20px 10px">
                    <a href="{% url 'dashboard' project_id=i.value.id %}" class="title" style="background-color: {{ i.value.get_color_display }};">{{ i.value.name }}</a>
                    <div class="info">
                        <div>
                            <a href="{% url 'project_unstar' project_type=i.type project_id=i.value.id %}">
                                <i title="点击取消星标" class="fa fa-star" style="font-size: 18px;" aria-hidden="false"></i></a>

                            <span>{{ i.value.creator.username }}</span>
                        </div>
                        <div>
                            <i class="fa fa-user-circle" aria-hidden="true"></i>
                            <span>{{ i.value.join_count }}</span>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>


    <div class="panel panel-primary " style="margin: 50px auto;width: 1300px">
        <div class="panel-heading">
            <h3 class="panel-title"><i class="fa fa-tags" aria-hidden="true"></i>&nbsp;我创建的</h3>
        </div>
        <div class="panel-body">
            {% for i in project_dict.my %}
                <div class="item" style="border-radius: 6px;width: 228px;border: 1px solid #dddddd;margin: 20px 10px">
                    <a href="{% url 'dashboard' project_id=i.id %}" class="title" style="background-color: {{ i.get_color_display }};">{{ i.name }}</a>
                    <div class="info">
                        <div>
                            <a href="{% url 'project_star' project_type='my' project_id=i.id %}">
                                <i title="点击添加为星标" class="fa fa-star" style="font-size: 18px;" aria-hidden="true"></i></a>
                            <span>{{ i.creator.username }}</span>
                        </div>
                        <div>
                            <i class="fa fa-user-circle" aria-hidden="true"></i>
                            <span>{{ i.join_count }}</span>
                        </div>
                    </div>
                </div>
            {% endfor %}

        </div>
    </div>


    <div class="panel panel-primary "  style="margin: 50px auto;width: 1300px">
        <div class="panel-heading">
            <h3 class="panel-title"><span class="glyphicon glyphicon-th" aria-hidden="true"></span>&nbsp;我参与的</h3>
        </div>
        <div class="panel-body">
            {% for i in project_dict.join %}
                <div class="item" style="border-radius: 6px;width: 228px;border: 1px solid #dddddd;margin: 20px 10px">
                    <a href="{% url 'dashboard' project_id=i.id %}" class="title" style="background-color: {{ i.get_color_display }};">{{ i.name }}</a>
                    <div class="info">
                        <div>
                            <a href="{% url 'project_star' project_type='join' project_id=i.id %}">
                                <i title="点击添加为星标" class="fa fa-star" style="font-size: 18px;" aria-hidden="false"></i></a>
                            <span>{{ i.creator.username }}</span>
                        </div>
                        <div>
                            <i class="fa fa-user-circle" aria-hidden="true"></i>
                            <span>{{ i.join_count }}</span>
                        </div>
                    </div>
                </div>
            {% endfor %}

        </div>
    </div>


{% endblock %}

{% block js %}
    <script>
        $(function () {
            bindSubmit();
        })

        function bindSubmit() {
            $('#btnSubmit').click(function () {
                $.ajax({
                    url: '{% url 'project_list' %}',
                    type: 'POST',
                    data: $('#addForm').serialize(),
                    dataType: 'JSON',
                    success: function (res) {
                        console.log(res);
                        if (res.status) {
                            location.href = location.href
                        } else {
                            $.each(res.error, function (key, value) {
                                $('#id_' + key).next().text(value[0]);
                            })
                        }
                    }
                })
            })
        }
    </script>
{% endblock %}